<template>
  <div class="todo-container">
    <div class="todo-wrap">
<!--      <Header :addTodo="addTodo"></Header>-->
      <Header @addTodo="addTodo"></Header>
      <List :todos="todos" :updateOne="updateOne" :deleteOne="deleteOne"></List>
      <Footer :todos="todos" :updateAll="updateAll" :deleteAll="deleteAll"></Footer>
    </div>
  </div>
</template>

<script>
import Header from "./components/Header";
import List from "./components/List";
import Footer from "./components/Footer";
export default {
  name: '',
  components:{
    Header,
    List,
    Footer
  },
  data(){
    return {
      todos:[
        {id:1,content:'抽烟',isOver:false},
        {id:2,content:'喝酒',isOver:true},
        {id:3,content:'烫头',isOver:true},
      ]
    }
  },
  //监视
  watch:{
    todos:{
      handler(newVal,oldVal){
        //只要是todos数据发生变化 就把变化后ode数据存储到localStorage当中
        //localStorage是前端本地存储的方案,是一个小型的数据库,存储到localStorage
        // 当中的东西都会自动转化为字符串
        //localStorage 当中有4个API
        // localStorage.setItem('键',值) //给localStorage存储数据
        // localStorage.setItem('键') //获取localStorage当中某个数据
        // localStorage.removeItem('键') //删除localStorage当中某个数据
        // localStorage.clear()//清空localStorage所有数据
        localStorage.setItem('TODOS_KEY',newVal)

      }
    }
  },
  methods:{
    addTodo(todo){
      this.todos.unshift(todo);
    },
    updateOne(index){
      this.todos[index].isOver=!this.todos[index].isOver
    },
    deleteOne(index){
      this.todos.splice(index,1)
    },
    updateAll(val){
      this.todos.forEach(item=>item.isOver=val)
    },
    deleteAll(){
      //把没打钩的过滤出来组成新数组把原数组修改为这个新数组
      //this.todos=this.todos.filter(item=>item.isOver)
      this.todos=this.todos.filter(item=>!item.isOver)
    }
  }
}
</script>

<style scoped>
/*app*/
.todo-container {
  width: 600px;
  margin: 0 auto;
}
.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

</style>